

    var name ="";
    var connection = new WebSocket("ws://localhost:8888"),connectedUser;


    // 获取用户登录
    var loginPage =  document.querySelector("#login-page"),
        usernameInput = document.querySelector("#username"),
        loginButton = document.querySelector("#login"),
        callPage = document.querySelector("#call-page"),
        theirUsernameInupt = document.querySelector("#their-username");
    callButton = document.querySelector("#call"),
        hangUpButton = document.querySelector("#hang-up");
    callPage.style.display = "none";

    // 单击按钮登录
    loginButton.addEventListener("click",function () {
        name = usernameInput.value ;
        if(name.length > 0){
            send({type:"login",name:name});
        };

    });

    connection.onopen = function () {
        console.log("Connected");
    };

    // 通过回调函数处理所有消息
    connection.onmessage = function (message) {
        console.log("Go message",message.data);
        var data = JSON.parse(message.data);
        switch (data.type){
            case "login":onLogin(data.success);
                break ;
            case "offer":onOffer(data.offer,data.name);
                break ;
            case "answer":onAnswer(data.answer);
                break;
            case "candidate":onCandidate(data.candidate);
                break;
            case "leave":onLeave();
                break;
            default:break;
        }
    };

    connection.onerror = function (err) {
      console.log("Got error");
    };

    // alias 以Json 格式发送消息
    function send(message) {
        if(connectedUser){
            message.name = connectedUser ;
        }
        connection.send(JSON.stringify(message));
    };



    //
    function onLogin(success) {
        if(success === false){
         alert("Login unsuccessful , please try a different name ");
        }else{
            loginPage.style.display = "none";
            callPage.style.display = "block";
            startConnection(); // 发起连接
        }
    };

    // 发起通话
    callButton.addEventListener("click",function () {
        var theirUsername = theirUsernameInupt.value ;
        if(theirUsername.length > 0){
            startPeerConnection(theirUsername);
        }
    });

    // 挂断电话
    hangUpButton.addEventListener("click",function () {
        send({type:"leave"});
        onLeave();
    });



    // webrtc 编写 ---------------------》
    var yourVideo = document.querySelector("#yours"),
        theirVideo = document.querySelector("#theirs"),
        yourConnection,connectedUser,stream;

    function startConnection() {
        if(hasUserMedia()){
            navigator.getUserMedia({video:true,audio:false},function (myStream) {
                stream = myStream ;
                yourVideo.src = window.URL.createObjectURL(stream);
                if(hasRTCPeerConnection()){
                    stepPeerConnection(stream);
                }else{
                    alert(" Sorry your brower does not support WebRTC.");
                }
            },function (error) {

            });
        }else{
            alert(" Sorry your brower does not support WebRTC.");
        }
    }

//
function stepPeerConnection (stream) {
    var configuration = {
        // Uncomment this code to add custom iceServers
        "iceServers": [{ "url": "stun:stun.1.google.com:19302" }]

    };
    yourConnection = new RTCPeerConnection(configuration);
    yourConnection.addStream(stream);
    yourConnection.onaddstream = function (e){
      theirVideo.src =   window.URL.createObjectURL(e.stream);
    };

    // 设置IDE处理事件
    yourConnection.onicecandidate = function (event) {
        if(event.candidate){
            send({type:"candidate",candidate:event.candidate});
        }
    };
}


    function hasUserMedia() {
        return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia) ;
    }
    function hasRTCPeerConnection() {
        window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
        window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
        window.RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate || window.mozRTCIceCandidate ;
        return !!window.RTCPeerConnection;
    }



    function startPeerConnection(user) {
        connectedUser = user ;
        // 开始创建offer
        yourConnection.createOffer(function (offer) {
            send({type:"offer",offer:offer});
            yourConnection.setLocalDescription(offer);
        },function (error) {
            alert("an error has occurred.");
        });

    };

    function onOffer(offer,name) {
        connectedUser = name ;
        yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

        yourConnection.createAnswer(function (answer) {
            yourConnection.setLocalDescription(answer);
            send({type:"answer",answer:answer})
        },function (error) {
            alert("an error has occurred");
        });
    };

    function onAnswer(answer) {
        yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
    };

    function onCandidate(candidate){
        yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
    };



    // 挂断电话
    hangUpButton.addEventListener("click",function () {
        send({type:"leave"});
        onLeave();
    });

    function onLeave() {
        connectedUser = null ;
        theirVideo.src = null ;
        yourConnection.close();
        yourConnection.onicecandidate=null;
        yourConnection.onaddstream = null ;
        stepPeerConnection(stream);
    }

